<template>
<el-container v-loading.fullscreen.lock="fullscreenLoading">
    <el-header>
        <div class="btn-api">
            <el-input v-model="apiname"  placeholder="输入接口名或接口路径搜索" autocomplete="off" style="width: 280px;"></el-input>
            <el-button type="primary" native-type="submit" @click="Search">搜索</el-button>
            <el-button type="primary" native-type="submit" @click="host_show = true">批量执行</el-button>
            <el-button type="primary" native-type="submit" v-if="IsLastTime() == true" @click="ContinueRun">执行上次记录</el-button>
            <el-button type="primary" native-type="submit" @click="dialogFormVisible=true">添加接口</el-button>
        </div>
        <el-dialog title="新增接口" :visible.sync="dialogFormVisible">
            <el-dialog
            width="30%"
            title="内层 Dialog"
            :visible.sync="innerVisible"
            append-to-body>
            </el-dialog>
          <el-form :model="apiform" class="apiform">
            <el-form-item label="接口名称" :label-width="formLabelWidth">
              <el-input v-model="apiform.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="接口路径" :label-width="formLabelWidth">
              <el-input v-model="apiform.apipath" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="标签" :label-width="formLabelWidth">
              <el-input v-model="apiform.ApiTag" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="分组" :label-width="formLabelWidth" >
              <el-select v-model="apiform.ApiGroup"  
              filterable
              allow-create 
              default-first-option
              placeholder="请选择分组"  @change="handleCreate1" >
                <el-option v-for="(item,index) in Groups" :key="item.name" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="域名" :label-width="formLabelWidth" >
              <el-select v-model="apiform.ApiHost" placeholder="请选择域名" 
              filterable
              allow-create
              no-data-text="无域名数据"
              default-first-option >
                <el-option v-for="item in HostList" :key="item.name" :label="item.name" :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.HostName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请求方式" :label-width="formLabelWidth">
          <!--       <el-radio v-model="apiform.ApiMethod" label="GET">GET</el-radio>
                <el-radio v-model="apiform.ApiMethod" label="POST">POST</el-radio> -->
                
              <el-select v-model="apiform.ApiMethod" placeholder="请选择请求方式">
                <el-option label="POST" value="POST"></el-option>
                <el-option label="GET" value="GET"></el-option>
                <el-option label="DELETE" value="DELETE"></el-option>
                <el-option label="PUT" value="PUT"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请求类型" :label-width="formLabelWidth">
                <el-radio v-model="apiform.ApiType" label="json">json</el-radio>
                <el-radio v-model="apiform.ApiType" label="form">form</el-radio>
              <!-- <el-select v-model="apiform.ApiType" placeholder="请选择请求类型">
                <el-option label="JSON" value="json"></el-option>
                <el-option label="FORM" value="from"></el-option>
              </el-select> -->
            </el-form-item>

            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="apiAdd">确 定</el-button>
          </div>
        </el-dialog>
    </el-header>
    <!-- <el-main> -->
    <div>
        <div class="tabdiv">
            <el-table
            ref="multipleTable"
            :data="apilist"
            :row-key="rowKey"
            @selection-change="handleSelectionChange"
            :height="400"
            :highlight-current-row = "true"
            style="width: 100%;background-color: rgba(19, 206, 102, 0)">
            <el-table-column
            type="selection"
            :reserve-selection="true"
            ></el-table-column>
            <el-table-column
            prop="id"
            label="接口ID"
            width="100">
            </el-table-column>
            <el-table-column
            prop="apiname"
            label="名称"
            width="180">
            </el-table-column>
            <el-table-column
            prop="apipath"
            label="地址"
            width="280">
            </el-table-column>
            <el-table-column
            prop = "ApiMethod"
            label="请求方式"
            width="80"
            >    
            </el-table-column>
            <el-table-column
            prop="ApiType"
            label="接口类型"
            width="80">
            </el-table-column>


            <el-table-column 
            label="域名"
            width="160" >
            <template slot-scope="scope" >
                <div v-for="(item,index) in HostList" v-if="item.id == scope.row.ApiHost.id">
                    {{item.HostName}} 
                </div>
            </template>
            </el-table-column>
            

            <el-table-column 
            label="环境"
            width="80" >
            <template slot-scope="scope" >
                <div v-for="(item,index) in HostList" v-if="item.id == scope.row.ApiHost.id">
                    <div v-for="(i,index) in SerList" v-if="i.id == item.service">
                        <!-- <el-tag
                        type= 'success'
                        disable-transitions>{{i.desc}}
                        </el-tag> -->
                        <el-tag
                        :type="co(item.service)"
                        disable-transitions>{{i.desc}}
                        </el-tag>

                    </div>
                </div>
                
            </template>
            </el-table-column>
            <el-table-column
            prop=""
            label="所属分组"
            width="80">
            <template slot-scope="scope" >
                <div v-for="item in Groups" v-if="item.id == scope.row.ApiGroup.id">
                     
                    <el-tag type="info">{{item.name}}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            prop="create_at"
            label="日期"
            width="160">
            </el-table-column>
            <!-- <el-table-column
            align="right">
            <template slot="header" slot-scope="scope">
              <el-input v-model="apiname"  placeholder="输入接口名进行搜索" autocomplete="off" style="width: 100px;"></el-input>
              <el-button type="primary" native-type="submit" @click="Search">搜索</el-button>
            </template>
          </el-table-column> -->
        </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="200">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="Run(scope.row)"
                  type="text"
                  size="small">
                  执行
                </el-button>
                <el-button
                  @click.native.prevent="PressView(scope.row)"
                  type="text"
                  size="small">
                  并发执行
                </el-button>
                <el-button
                  @click.native.prevent="deleteRow(apilist,scope.$index,scope.row)"
                  type="text"
                  size="small">
                  删除
                </el-button>
                <el-button
                  @click.native.prevent="editorRow(apilist,scope.$index, scope.row)"
                  type="text"
                  size="small">
                  编辑
                </el-button>



                <el-switch
                  v-model="IsProxy"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="代理开启"
                  inactive-text="代理关闭">
                </el-switch>
              </template>
            </el-table-column>
            </el-table>
            <el-dialog title="选择运行环境" :visible.sync="host_show">
              <div v-for="item in HostList">
                <el-radio v-model="runhost" :label="item.id">{{item.name}}</el-radio>
              </div>
              
              <el-button type="primary" @click="BatchRun">确 定</el-button>
            </el-dialog>

            <el-dialog title="执行参数" :visible.sync="pressShow">
              <el-form :model="pressform">
                <el-form-item label="域名" :label-width="formLabelWidth">
                  <el-select v-model="pressform.host" placeholder="请选择活动区域">
                    <div v-for="item in HostList">
                      <el-option :label="item.HostName" :value="item.id"></el-option>
                    </div>
                  </el-select>
                </el-form-item>
                <el-form-item label="并发数" :label-width="formLabelWidth">
                  <el-input-number v-model="pressform.num" :min="1" :max="1000" label="描述文字"></el-input-number>
                </el-form-item>

                <el-form-item label="是否打印接口返回值">
                  <el-switch v-model="pressform.echo"></el-switch>
                </el-form-item>
                <el-form-item label="json">
                  <el-switch v-model="pressform.isjson"></el-switch>
                </el-form-item>

                <el-form-item label="代理">
                  <el-switch v-model="pressform.proxy"></el-switch>

                </el-form-item>
                <el-form-item label="代理地址" :label-width="formLabelWidth" v-if="pressform.proxy">
                  <el-input v-model="pressform.proxyurl" autocomplete="off"></el-input>
                </el-form-item>


                
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="pressShow = false">取 消</el-button>
                <el-button type="primary" @click="PressRun()">确 定</el-button>
              </div>
            </el-dialog>
            <el-dialog title="执行结果" :visible.sync="pressResShow">
              <p v-if="pressRes != ''"> {{pressRes}}</p>
              <div slot="footer" class="dialog-footer">
                <el-button @click="pressShow = false">取 消</el-button>
              </div>
            </el-dialog>
        </div>
        
        <el-drawer
            :visible.sync="drawer"
            :direction="direction"
            size = "40%"
            :before-close="handleClose">
            <div class="drawer">
            <div class="spandiv"><H3>接口编辑</H3></div>
            <el-collapse v-model="activeNames" @change="handleChange">
            
            <el-collapse-item title="接口编辑" name="1">
            
            <div class="formedit">
                <el-form :model="apiinfo" class="form">
                  <el-form-item label="接口名称" :label-width="formLabelWidth" class="item_name">
                    <el-input v-model="apiinfo.apiname" autocomplete="off" class="item_name_input"></el-input>
                  </el-form-item>
                  <el-form-item label="接口路径" :label-width="formLabelWidth" class="item_name">
                    <el-input v-model="apiinfo.apipath" autocomplete="off" class="item_name_input"></el-input>
                  </el-form-item>
                  <el-form-item label="接口版本号" :label-width="formLabelWidth" class="item_name">
                    <el-input v-model="apiinfo.ApiBuildNum" autocomplete="off" class="item_name_input"></el-input>
                  </el-form-item>
                  
                  <el-form-item label="接口标签" :label-width="formLabelWidth" class="item_name">
                    <el-input v-model="apiinfo.ApiTag" autocomplete="off" class="item_name_input"></el-input>
                  </el-form-item>
                  <el-form-item label="接口分组" :label-width="formLabelWidth" class="item_name">
                    <el-select v-model="apiinfo.ApiGroup" filterable placeholder="请选择">
                        <el-option
                          v-for="item in Groups"
                          :key="item.name"
                          :label="item.name"
                          :value="item">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="环境" :label-width="formLabelWidth" class="item_name">
                    <!-- <el-input v-model="apiinfo.ApiHost" autocomplete="off" class="item_name_input"></el-input> -->
                    <el-select v-model="apiinfo.ApiHost" placeholder="请选择环境" no-data-text="无域名数据" @change="remoteMethod">

                      <el-option v-for="item in HostList" :label="place()" :value="item">
                        <!-- <template slot-scope="scope" ><div> {{ item.name }}</div></template> -->
                        <span style="float: left" >{{ item.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.HostName }}</span>
                      </el-option>
                    </el-select>

                  </el-form-item>
                  <el-form-item label="请求方式" :label-width="formLabelWidth" class="item_name">
                    <el-select v-model="apiinfo.ApiMethod" placeholder="请选择请求方式">
                      <el-option label="Post" value="Post"></el-option>
                      <el-option label="GET" value="GET"></el-option>
                      <el-option label="PUT" value="PUT"></el-option>
                      <el-option label="Head" value="Head"></el-option>
                      <el-option label="DELETE" value="DELETE"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="请求类型" :label-width="formLabelWidth" class="item_name">
                    <el-select v-model="apiinfo.ApiType" placeholder="请选择请求类型">
                      <el-option label="json" value="json"></el-option>
                      <el-option label="form" value="form"></el-option>
                      <el-option label="RAW" value="RAW"></el-option>
                      <el-option label="XML" value="XML"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否IOS" :label-width="formLabelWidth" class="item_name">
                    <el-switch
                    v-model="apiinfo.ios"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch>
                  </el-form-item>
                  <el-form-item label="关闭加密" :label-width="formLabelWidth" class="item_name">
                    <el-switch
                    v-model="apiinfo.encrypt"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch>
                  </el-form-item>

                </el-form>
            </div>
            <div  class = "api_button"><el-button @click="apiSave">保存接口</el-button></div>
            </el-collapse-item>
            <el-collapse-item title="Header编辑" name="3">
              <div>
                <el-button @click="AddHeaders">添加HEAD</el-button>

                <div class="header">
                  <el-form :model="Headers" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                        <el-form-item
                        v-for="(domain, index) in Headers.domains"
                        :label="'参数' + index">
                        <el-input v-model="domain.Name" class="par_new_input" placeholder="请输入参数Key"></el-input>
                        <el-input v-model="domain.Values"   class="par_new_input" placeholder="请输入参数value"></el-input>
                        <div style="white-space: nowrap;max-width: 180px;">
                        <el-input v-model="domain.desc" type="textarea"  autosize  class="par_new_input" placeholder="请输入描述"></el-input>
                        </div>
                        <el-button @click.prevent="removeHead(domain)">删除</el-button>
                      </el-form-item>
                      <div class = "par_button">
                     <!--  <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> -->
                <!--       <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> -->
                      <el-button @click="addHead">add</el-button>
                      </div>
                    </el-form>
                </div>

                
              </div>
            </el-collapse-item>

            <!-- <div class="parname"><span>请求参数</span></div>  -->
            <el-collapse-item title="参数编辑" name="2">
            <div class="parbody">
              <span>参数json</span>
                <el-switch
                  v-model="ParJson"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>

                <div v-if="parlist.length == 0 && ParJson">
                  <el-input v-model="JsonPar" type="textarea" placeholder="请输入内容"></el-input>
                </div>
                <div v-if="parlist.length == 0 && !ParJson"  >
                    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                        <el-form-item
                        v-for="(domain, index) in dynamicValidateForm.domains"
                        :label="'参数' + index+1" class="pardiv">
                        <div style="white-space: nowrap;">
                            <span style="margin-right: 4px;">参 数 名 </span> <el-input v-model="domain.Key" class="par_new_input" placeholder="请输入参数Key"></el-input>
                        </div>
                        <div style="white-space: nowrap;" v-if="domain.types !=12">
                        
                        <span style="margin-right: 12px;">参数值</span> <el-input v-model="domain.value"   class="par_new_input" placeholder="请输入参数value"></el-input>
                        </div>
                        <template v-if="domain.types==12"  v-model="domain.value" style="white-space: nowrap;">
                            <div style="white-space: nowrap;">
                                接口<el-select v-model="domain.id" filterable placeholder="请选择接口" @change="JsonToStr(domain)" size="mini">
                                    <el-option
                                    v-for="item in AllApi"
                                    :key="item.apiname"
                                    :label="item.apiname"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-tooltip class="item" effect="dark" content="查看接口返回结果,不填写需要的返回值字段，则返回该接口所有数据" placement="top">
                                    <el-button @click.prevent="Test(domain,api_host)" :loading="test_loading">测试</el-button>
                                </el-tooltip>
                            </div>

                          过滤字段 <el-input v-if="domain.types==12" v-model="domain.name"   class="par_new_input" placeholder="请输入返回值字段"@change="JsonToStr(domain)" ></el-input>
                          本地host<el-tooltip class="item" effect="dark" content="如果开启使用原接口地址" >
                            <el-switch
                              v-model="domain.self"
                              active-color="#13ce66"
                              inactive-color="#ff4949" @change="JsonToStr(domain)">
                            </el-switch>
                          </el-tooltip>

                        </template>
                        
                        <div style="white-space: nowrap;">
                        <span>参数类型</span>
                        <el-select v-model="domain.types" placeholder="请选择参数类型" size="mini">
                            <el-option v-for="items in Ptype" :key="items.Name" :label="items.Name" :value="items.id">
                            </el-option>
                        </el-select>
                        </div>
                        
                        <div style="white-space: nowrap;max-width: 180px;">
                           <span style="margin-right: 3px;"> 参数描述</span>
                           <el-input v-model="domain.desc" type="textarea"  autosize  class="par_new_input" placeholder="请输入描述"></el-input>
                        </div>
                        <div class="par_new_input"></div>
                        <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                      </el-form-item>
                        <div class = "par_button">
                        <el-button @click="addDomain">ADD</el-button>
                      </div>
                    </el-form>
                </div>

                <div class="pardiv" v-for="item,index in parlist">
                        <h4 style="text-align: center;margin-bottom: 5px;">字段{{index+1}}</h4>
                        <div style="white-space: nowrap;">
                        <span style="margin-right: 4px;">参 数 名 </span><el-input v-model="item.Keys"  class="par_new_input" >
                        </el-input>
                        </div>
                        <div v-if="item.Types.id !=12" style="white-space: nowrap;">
                        <span style="margin-right: 12px;">参数值</span> <el-input v-model="item.Values"   class="par_new_input" placeholder="请输入参数value"></el-input>
                        </div>
                        <div v-if="item.Types.id==12" style="white-space: nowrap;">
                          <span style="margin-right: 20px;">接  口</span> <el-select v-model="item.Values.id"  filterable placeholder="请选择接口" size="mini"  @change="JsonToStr(item.Values)">
                            <el-option
                            v-for="items in AllApi"
                            :key="items.apiname"
                            :label="items.apiname"
                            :value="items.id">
                            </el-option>
                          </el-select>
                          <el-tooltip class="item" effect="dark" content="查看接口返回结果,不填写需要的返回值字段，则返回该接口所有数据" placement="top">
                            <el-button @click.prevent="Test(item.Values,api_host)" :loading="test_loading">测试</el-button>
                          </el-tooltip>

                          过滤字段<el-input v-if="item.Types.id==12" v-model="item.Values.name"  class="par_new_input" placeholder="请输入参数value" @change="JsonToStr(item.Values)"></el-input>
                          
                          本地host<el-tooltip class="item" effect="dark" content="如果开启使用原接口地址" >
                            <el-switch
                              v-model="item.Values.self"
                              active-color="#13ce66"
                              inactive-color="#ff4949" @change="JsonToStr(item.Values)">
                            </el-switch>
                          </el-tooltip>
                        </div>
                        <div style="white-space: nowrap;">
                        参数类型
                        <el-select v-model="item.Types.id" placeholder="请选择参数类型" size="mini"   @change="StrToJson(item)">
                            <el-option v-for="items in Ptype"
                              :key="items.Name"
                              :label="items.Name"
                              :value="items.id">
                            </el-option>
                        </el-select>
                        </div>
                        
                        <div style="white-space: nowrap;max-width: 180px;">
                        参数描述
                        <el-input v-model="item.desc" type="textarea"  autosize class="par_new_input"></el-input>
                        </div>
                </div>
                <el-dialog title="增加新参数" :visible.sync="parshow">
                <div style="height: 500px;">
                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic" >
                        <el-form-item
                        v-for="(domain, index) in dynamicValidateForm.domains"
                        :label="'参数' + index" >
                        <el-input v-model="domain.Key" class="par_new_input" placeholder="请输入参数Key"></el-input>
                        <el-input v-model="domain.value" v-if="domain.types !=12"  class="par_new_input" placeholder="请输入参数value"></el-input>
                        <template v-if="domain.types==12">
                          <el-select v-model="domain.id" filterable placeholder="请选择接口" @change="JsonToStr(domain)" size="mini">
                            <el-option
                            v-for="item in AllApi"
                            :key="item.apiname"
                            :label="item.apiname"
                            :value="item.id">
                            </el-option>
                          </el-select>
                          <el-input v-model="domain.name"   class="par_new_input" placeholder="请输入返回值字段"></el-input>
                        </template>
                        <el-select v-model="domain.types" placeholder="请选择参数类型" size="mini" @change="JsonToStr(domain)">
                            <el-option v-for="items in Ptype" :key="items.Name" :label="items.Name" :value="items.id">
                            </el-option>
                        </el-select>
                        <div style="white-space: nowrap;max-width: 180px;">
                        <el-input v-model="domain.desc" type="textarea"   class="par_new_input" placeholder="请输入描述"></el-input>
                        </div>
                        <div class="par_new_input"></div>
                        <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                      </el-form-item>
                      <div class = "par_button">
                     <!--  <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> -->
                <!--       <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> -->
                      <el-button @click="addDomain">ADD</el-button>
                      </div>
                </el-form>
                </div>
                
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="parAdd">确 定</el-button>
                </div>
                </el-dialog>
                

                </div>
                <div  class = "par_button" v-if="parlist.length > 0 "><el-button @click="addParDomain">添加新参数</el-button></div>
                <div  class = "par_button" v-if="parlist.length == 0"><el-button @click="parAdd">提交</el-button></div>
                <div  class = "par_button" v-if="parlist.length > 0 "><el-button @click="parSave">保存参数</el-button></div>
            </el-collapse-item>

            </el-collapse>



            </div>
        </el-drawer>



    </div>
    <!-- </el-main> -->
    
    <el-pagination
    :page-size="pagesize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page = "page"
    :page-sizes="[10, 20, 50, 100]"
    background
    layout="total,sizes,prev, pager, next,jumper"
    :total="total" style="text-align: center;margin-bottom: 20px;">
    </el-pagination>
    <el-divider></el-divider>

    <div v-show="res_show" style="background-color: rgba(237, 201, 230, 0.08);padding: 10px;">
      <el-dialog title="接口返回结果" :visible.sync="res_show">
        <el-row>
            <el-col :span="4"> {{start}}</el-col>
            <el-col :span="4">{{end}} </el-col>
            <el-col :span="4">
                <p v-if="runtime  < 1"> {{runtime}}</p>
                <p v-if="runtime >1" style="color: red">{{runtime}}</p>
            </el-col>
            <!-- <el-col :span="12">
            </el-col> -->
        </el-row>
        <div class="res">
            <!-- <pre>{{ JSON.stringify(response, null, 4)  }}</pre> -->
            <json-viewer :value="response" :expand-depth=5 copyable boxed sort></json-viewer> 
        </div>
      </el-dialog>
    </div>
    历史记录
    <div>
        
        <el-table
        :data="ApiResList"
        :height="400"
        >
            <el-table-column
              label="接口ID"
              width="180">
              <template slot-scope="scope">
                <!-- <i class="el-icon-time"></i> -->
                <span style="margin-left: 10px">{{ scope.row.ApiId }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="接口名称"
              width="200">
              <template slot-scope="scope">
                <!-- <i class="el-icon-time"></i> -->
                <span style="margin-left: 10px">{{ scope.row.ApiName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="接口地址"
              width="180">
              <template slot-scope="scope">
                <!-- <i class="el-icon-time"></i> -->
                <span style="margin-left: 10px">{{ scope.row.ApiPath }}</span>
              </template>
            </el-table-column>
            
            <el-table-column
              label="请求参数"
              width="400" >
                <template slot-scope="scope">
                  <!-- <el-tooltip :content="scope.row.Params" placement="bottom" effect="light"> -->
                    
                    <el-button @click="rowShow(scope.row)" type="text" size="small">查看请求参数</el-button>
                    <el-dialog
                      :visible.sync="scope.row.id==showView"
                      title="请求参数"
                      :before-close="handleClose"
                    >
                      <div class="line-limit-length">
                        <json-viewer :value="jsonFromat(scope.row.Params)" :expand-depth=1 copyable boxed sort></json-viewer> 
                      </div>
                    </el-dialog>
                  
                  <!-- </el-tooltip> -->
                </template>
            </el-table-column>
            <el-table-column
              label="返回结果"
              width="430">
              <template slot-scope="scope">
                  <el-button @click="rowResShow(scope.row)" type="text" size="small">查看返回结果</el-button>
                  <el-dialog
                    :visible.sync="scope.row.id==showResView"
                     fullscreen 
                    title="接口返回结果"
                    :before-close="handleClose"
                  >
                    <div class="line-limit-length">
                      <json-viewer :value="jsonFromat(scope.row.ResJson)" :expand-depth=4 copyable sort></json-viewer>
                    </div>
                  </el-dialog>
                  
                </template>
            </el-table-column>
            <el-table-column
              label="环境"
              width="200" >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">
                    <div v-for="item in HostList" v-if="scope.row.Service==item.id"> {{item.name}}</div>
                  </span>
                </template>
            </el-table-column>

            <el-table-column
              label="开始时间"
              width="180">
                <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.StartTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
              label="结束时间"
              width="180">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.EndTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
              label="响应时间(MS)"
              width="180">
              <template slot-scope="scope">
                <span style="margin-left: 10px;color: red; "  v-if="scope.row.ResTime > 1000">{{ scope.row.ResTime }}</span>
                <span style="margin-left: 10px;" v-if="scope.row.ResTime < 1000">{{ scope.row.ResTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
              label="测试结果"
              width="180">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.Status === true ? 'success' : 'danger'"
                  disable-transitions>{{scope.row.Status}}

                </el-tag>
                </template>
            </el-table-column>
            
            
        </el-table>

        
    </div>
</el-container>
</template>

<script>
import {apiSearch,getapiList,apidel,getpar,getptype,apiadd,apiedt,paradd,hosts,getserv,groups,apirun,paredt,batchrun,historys,searchHead,AddHeader,headerUpdate,ResParTest,apis,addgroup} from '../../api/autopay'; 

import {PressApi} from '../../api/api';
import {StrToJson,ReplaceAll} from '../../js/tools'; 
export default {
  name: 'ProjectInfo',
    data(){
        return { 
          NewGroup:0,
          apiname:"",
          dialogVisible:false,
          dialogRes:false,
          fullscreenLoading:false,
          host_show:false,
          apimd5: "",
          proid: this.$route.params.ProId,
          apilist: [],
          AllApi:[],
          ApiResList:[],
          tmplist:[],
          direction: 'rtl',
          total: 0,
          showView:0,
          showResView:0,
          pagesize:20,
          ParJson:false,
          pressShow:false,
          JsonPar: "",
          page: 1,
          activeNames: ['2'],
          addpar_show: false,
          response: {},
          start:"",
          end:"",
          runhost: 0,
          is_show:false,
          runtime:"",
          drawer: false,
          res_show:false,
          dialogFormVisible:false,
          innerVisible: false,
          parshow:false,
          IsProxy:false,
          test_loading:false,
          Repeat:false,
          api_host:0,
          pressRes: "",
          selfHost:false,
          // place:"请选择环境",
          val:"",
          // Parfrom:{
          //   id:0,
          //   name:""
          //   host:0
          // },
          apiform:{
                name: '测试数据',
                apipath: '/v1/user/add',
                ApiMethod: '',
                ApiType: '',
                ApiHost: '',
                ApiTag: 'A12',
                user: parseInt(sessionStorage.userId),
                desc: '测试接口数据'
          },
          multipleSelection: [],
          pressform:{
            "api": 0,
            "echo": false,
            "host": 8966,
            "isjson": false,
            "method": "post",
            "num": 1,
            "proxy": false,
            "proxyurl": "http://192.168.248.191:8001"
          },
          api_id:0,
          formLabelWidth:"10",
          currentPage1: 1,
          apiinfo: {},
          api_server:0,
          parlist:[],
          Headlist:[],
          HostList:[],
          SerList : [],
          pressResShow:false,
          Headers: {
            domains: [{
                Name: "",
                Values: "",
                desc: "",
            }],
          },
          dynamicValidateForm: {
            domains: [{
                Key: "",
                value: "",
                desc: "",
                types: 4,
                id:0,
                self:false,
                name:""
            }],
          },
          Ptype:[],
          Groups:[],
        }
    },
    computed:{
    },
    mounted:function () {
        // this.notifyMe();
        this.GetApi();
        this.GetPtype();
        this.GetHost();
        this.GetSevice();
        this.GetGrps();
        this.Gethistory();
        
    },//mounted
    methods: {
      rowResShow(row){
        this.showResView = row.id
      },
      rowShow(row){
        this.showView = row.id;
      },
      handleCreate1(event){
        if (typeof(event) == "string"){
          this.AddGroup(event)
          this.GetGrps()
        }else{
          console.log(event);
        }
        
        // if(this.$refs.editGrade.createdLabel == null){
        //   console.log("a");
        // }else {
        //   console.log("b");
        // }
      },
      AddGroup(name){
          var that = this;
          var formGroup = {"name":name,"Desc":name}
          if (that.$route.params.ProId == 0 || that.$route.params.ProId == undefined  )  {
              that.$message.error("未获取到项目ID")
              return 0
          }else{
            formGroup["project"] = that.$route.params.ProId
          }
          
          addgroup(formGroup).then(res=>{
            let {code, msg, data} = res;
            if (code == 200){
                that.$message("分组信息添加成功");
                this.NewGroup = data.id
                return data.id
            }else{
                that.$message.error("分组信息添加失败")
                return 0
            }
          }).catch(
            function(error){
                that.$message.error(error)
          })
          return 0
        },
      apiAll(){
        var that = this;
            if (that.proid == undefined){
                that.proid = Number(sessionStorage.getItem("ProId"))
            }
            let params = {"proid":that.proid,"page":that.page};
            apis(params).then( res => {
                let { msg, code, data } = res;
                that.AllApi = data.list;
            }).catch(
               function(error)  {
                    console.error(error);

                }
            )
      },
        notifyMe(){ 
            if (!("Notification" in window)) { 
                alert("This browser does not support desktop notification"); 
            }else if (Notification.permission === "granted") {
                var notification = new Notification("Hi there!"); 
                notification.title = "ceshi"
                notification.onshow = true
                console.log(notification);
                notice()
            }else if (Notification.permission !== 'denied') { 
                Notification.requestPermission(function (permission){ 
                    if (permission === "granted") { 
                        var notification = new Notification("Hi there!"); 
                    } 
                }); 
            }
        },
        notice() {
            var notification = new Notification("你好，JavaScript",{
                body:'微信订阅号',
                icon:"https://mp.weixin.qq.com/misc/getheadimg?token=990524500&fakeid=3006291623&r=674680"
            });
            notification.onclick = function(){
                notification.close()
            }
        },
      Test(info,host){
        var that = this;
        console.log(info);
        let par = {}
        try {
          par =  JSON.parse(info.value);
        }catch(e){
          par =  info
        }
        par.host = host
        if (par.id == 0){
            that.$message.error("请选择接口后再进行测试");
            return 
        }
        that.test_loading = true
        ResParTest(par).then(res =>{
            let {code,msg,data} = res;
            if (code == 200){
              that.$alert(data, {
              dangerouslyUseHTMLString: true
              });
            } 
            that.test_loading = false
          }).catch(
            function(error) {
              that.$message.error("测试失败:\n"+error);
              that.test_loading = false
          })
          
      },
      IsLastTime(){
        return sessionStorage.Last_time != undefined
      },
      ContinueRun(){
        this.Repeat = true;
        console.log("再次执行上次任务",this.Repeat);
        this.BatchRun();
      },
      addHead() {
            this.Headers.domains.push({
              Name: '',
              Values: '',
              desc: ''
            });
      },
      removeHead(item) {
            var index = this.Headers.domains.indexOf(item)
            if (index !== -1) {
              this.Headers.domains.splice(index, 1)
            }
      },
      AddHeaders() {
        // body...
        var that = this;
        for (var i = that.Headers.domains.length - 1; i >= 0; i--) {
          that.Headers.domains[i]["Api"] = {"id": that.apiinfo.id}
          // let par = {"Api": {"id": that.apiinfo.id},"Name": "FDDF","Values": "sfsdfsfsf","desc": "dfdsfd"}
          AddHeader(that.Headers.domains[i]).then(res =>{
            let {code,msg,data} = res;
            if (code == 200){
              this.$message("Header添加成功");
            } 
          }).catch(
            function(error) {
              // body...
              that.$message.error("接口失败:\n"+error);
            }
          )
        }
        

        
      },
      Search(pages){
        var that = this;
        if (typeof(pages) == "object"){
          that.page = 1
        }
        
        if (that.proid == undefined){
          that.proid = Number(sessionStorage.getItem("ProId"))
        }

        var par = {"proid":that.proid,"page":that.page,"pagesize":that.pagesize,"name":that.apiname}
        apiSearch(par).then(res =>{
          let {code,msg,data} = res 
          if (code == 200){
            that.apilist = data.list;
            that.total = data.count;
          }
        }).catch(
        function(error) {
          // body...
          that.$message.error("接口失败:\n"+error);
        }
        )
      },
      remoteMethod(query) {
        var that = this;
        for (var i = that.HostList.length - 1; i >= 0; i--) {
          if (that.HostList[i].id == query.id){
            that.api_server = that.HostList[i].service;
            break
          }
        }
        that.GetPar();
      },
      jsonFromat(jsonstr){
        var res = ReplaceAll('\\"','\"',jsonstr)
        res = ReplaceAll('}"','}',res)
        var strjson = ReplaceAll('"{',"{",res)
        try {
          var JsonMsg = JSON.parse(strjson)
          
          return JsonMsg
        }catch (e) {
          // console.log(strjson);
          // console.log(e);
          return strjson
        }
      },
      place(){
        var that = this;
        var msg = "请选择环境";
        if (that.apiinfo == undefined ) {
          return msg
        }else if(that.apiinfo.ApiHost == undefined) {
          return msg
        }else {
          for (var i = that.HostList.length - 1; i >= 0; i--) {
            if (that.HostList[i].id == that.apiinfo.ApiHost.id){
              msg = that.HostList[i].name;
              break
            }

          }
          return msg
        }
        
      },
      GroupPlace(){
        var that = this;
        var msg = "请选择环境";
        if (that.apiinfo == undefined ) {
          return msg
        }else if(that.apiinfo.ApiGroup == undefined) {
          return msg
        }else {
          for (var i = that.Groups.length - 1; i >= 0; i--) {
            if (that.Groups[i].id == that.apiinfo.ApiGroup.id){
              msg = that.Groups[i].name;
              break
            }

          }
          return msg
        }

      },
      rowKey (row) {
        return row.id
      },
      GetHead(){
        let params = {"apiId":this.api_id,};
          searchHead(params).then( res => {
              var that = this;
              let { msg, code, data } = res;
              that.Headlist = data;
              if (data.length > 0){
                that.Headers.domains = data;
              }
          }).catch(
             function(error)  {
                  console.error(error);
              }
          )
      },
      GetPar(){
          let params = {"id":this.api_id,"service":this.api_server};
          getpar(params).then( res => {
              var that = this;
              let { msg, code, data } = res;
              for (var i = data.list.length - 1; i >= 0; i--) {
                if (data.list[i].Types.id == 12) {
                  try {
                    data.list[i].Values = JSON.parse(data.list[i].Values)
                  } catch(e) {
                    data.list[i].Values = {"id":0,"name":"","host":0,"self":false}
                  }
                  
                }
              }
              that.parlist = data.list;
          }).catch(
             function(error)  {
                  console.error(error);
              }
          )
      },
      Gethistory(){
          let par = {"md5":""}
          if (this.apimd5 == ""){

          } 
          historys(par).then(res => {
              let {code,msg,data} = res;
              if (code == 200) {
                  this.$message("获取成功");
                  this.ApiResList = data.list;
              }
              
          }).catch(
              (err) => {
                  this.$message.error("接口失败:\n");
              }
          )
        },
        PressView(api){
          this.pressform.api = api.id
          this.pressShow = true;
        },
        PressRun(){
          this.pressRes = ""
          PressApi(this.pressform).then(
            res => {
              let {code,msg,data} = res;
              console.log(code,msg,data);
              this.pressRes = data;
              this.pressShow = false;
              this.pressResShow = true;
            }).catch(
                (err) => {
                    this.$message.error("请求发送失败:\n");
                }

            )
        },
        BatchRun(){
          this.host_show = false;
          if (this.multipleSelection.length == 0 && !this.Repeat){
            this.$message.error("请选择需要执行的接口");
            return 
          }
          this.fullscreenLoading = true;
          let par = {"list":this.multipleSelection,"runhost":this.runhost}
          if (this.Repeat == false) {
              sessionStorage.setItem('Last_time',JSON.stringify(par));
          }else if (this.Repeat) {
            par = JSON.parse(sessionStorage.Last_time)
          }


          batchrun(par).then(
            res => {
              let {code,msg,data} = res;
              this.$message("执行完成"+data)
              this.Gethistory();
              this.routerTo(data.md5);
              this.fullscreenLoading = false;
            }).catch(
                (err) => {
                    this.$message.error("请求发送失败:\n");
                    this.fullscreenLoading = false;
                }

            )
            

        },
        routerTo(id) {
          this.$router.push({ name: 'TestReport', params: { Md5str: id }});
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        co(id){
          if (id == 1){
              return " "
          }else if (id == 2) {
              return "success"
          }else{
              return "info"
          }

        },
        StrToJson(roms){
          console.log("StrToJson",roms);
          if (roms.Types.id == 12){
            roms.Values = {"id":0,"name": "","host":0,"self":false}
          }
          return roms
        },
        JsonToStr(roms){
          console.log("JsonToStr",roms);
          let par = {"id":roms.id,"name":roms.name,"host":0,"self":roms.self}
          var tmp = JSON.stringify(par)
          roms.value = tmp
          console.log(roms.value);
        },
        GetGrps() {
            groups().then(
                res => {
                var that = this;
                let { msg, code, data } = res;
                that.Groups = data.list;
            }).catch()
        },
        Run(api) {
          var msg = "{\"clientSW\":\"5.5.2\",\"client_type\":\"app\",\"deviceID\":\"f4b9bcfd8218151d993bbbfc9f0f7dccda4251c4lx\",\"platform\":\"0\",\"ptype\":\"Product: starqltezc, CPU_ABI: armeabi-v7a, MODEL: SM-G9600, SDK: 28, BRAND: samsung, MANUFACTURER: samsung, USER: dpi\",\"sign\":\"1230a955b85ecd71aa8a289128ebda12\",\"sys\":\"ADR8.0.0\",\"t\":\"1623900525000\",\"userId\":\"1411820\"}"

            let par = {"id":api.id,"proxy":this.IsProxy}
            apirun(par).then(res =>{
                let {code ,msg,data} = res;
                if (code == 200) {
                    var res = JSON.parse(data);
                    this.response =JSON.parse(res.res);// JSON.stringify(res.res,null,4);
                    this.start  = res.start;
                    this.end = res.end;
                    this.runtime = res.time;
                    this.$message("执行成功");
                    this.res_show = true;
                    this.Gethistory();
                }else{
                  this.$message.error(data)
                }
            }).catch(
                (err) => {
                    this.$message.error("请求发送失败:\n"+err)
                }
            )
        },
        apiAdd(){
            var that = this;
            if (that.NewGroup != 0){
              that.apiform["ApiGroup"] = that.NewGroup
            }
            
            if (that.$route.params.ProId == 0 || that.$route.params.ProId == undefined  )  {
              that.$message.error("未获取到项目ID")
              return
            }else{
              that.apiform["Project"] = that.$route.params.ProId;
            }
            
            if (sessionStorage.ProId == "0" || sessionStorage.ProId == undefined) {
              that.$message.error("未获取到项目ID")
              return 
            }else{
              that.apiform["Project"] = Number(sessionStorage.ProId);
            }

            
            apiadd(that.apiform).then(res => {
                let {code,msg,data} = res;
                if (code == 200){
                    that.$message("接口数据添加成功")
                    that.dialogFormVisible = false;
                    that.GetGrps();
                    that.GetApi();

                }else{
                  // that.dialogFormVisible = false;
                  that.$message.error("接口数据添加失败，请重试"+data)
                }
            }).catch()
        },
        parAdd() {
            var that = this;

            let par = {"id":that.apiinfo.id,"par":that.dynamicValidateForm.domains};
            if (that.ParJson){
              // par["parJson"] = that.JsonPar
              var tmppar = StrToJson(that.JsonPar)
              var parlist = []
              for (var key  in tmppar){
                var params = {}
                params["key"] = key;
                params["value"] =  tmppar[key].toString();
                params["types"] = 4;
                params["desc"] = key;
                parlist.push(params)
                
              }
              par["par"] = parlist;
            }

            console.log(par);
            // return 
            paradd(par).then(res =>{
                let { msg, code, data } = res; 
                if (code == 200 ){
                    that.$message("参数添加成功")
                    that.resetForm("dynamicValidateForm")
                    that.parshow = false;
                }else{
                    that.$message.error(data);
                }
                
            }).catch()
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        removeDomain(item) {
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if (index !== -1) {
              this.dynamicValidateForm.domains.splice(index, 1)
            }
        },
        addParDomain() {
          this.parshow = true;
          // this.dynamicValidateForm.domains.push({
          //     value: '',
          //     key: '',
          //     types: 0
          // });
        },
        addDomain() {
            this.dynamicValidateForm.domains.push({
              value: '',
              key: '',
              types: 4,
              id:0,
              name:""
            });
        },
        // 删除接口
        deleteRow(rows,index, row) {
            this.$confirm('确认删除？').then(_ => {
                rows.splice(index, 1);
            let par  = {"id":row.id}

            apidel(par).then(
                res => {
                   var that = this;
                    let { msg, code, data } = res; 

            }).catch()
            }).catch(_ => {});
            
        },
        handleClose(done) {
            this.$confirm('确认返回接口列表？')
              .then(_ => {
                done();
                this.showView = 0;
                this.showResView = 0;
              })
              .catch(_ => {});
              
        },
        handleChange(){

        },
        apiSave(){
            var that = this;

            let pat = { "id":that.apiinfo.id,"apiname":that.apiinfo.apiname,"apipath":that.apiinfo.apipath,"ApiBuildNum":that.apiinfo.ApiBuildNum,"ApiTag":that.apiinfo.ApiTag,"ApiMethod":that.apiinfo.ApiMethod,"ApiType":that.apiinfo.ApiType,"ApiHost":that.apiinfo.ApiHost,"ios":that.apiinfo.ios,"encrypt":that.apiinfo.encrypt,"ApiGroup":that.apiinfo.ApiGroup}
            apiedt(pat).then(res => {
                let {code,msg,data} = res;
                if (code == 200) {
                  
                  that.$message("接口"+that.apiinfo.apiname+"保存成功")
                }
                
            }).catch()
        },
        parSave(){
            var that = this;
            for (var i = that.parlist.length - 1; i >= 0; i--) {
                // let par = {"api":that.apiinfo,"key":that.parlist[i].Keys,"types":that.parlist[i].Types,"value":that.parlist[i].Values}
                if (typeof(that.parlist[i].Values) == "object"){
                  that.parlist[i].Values = JSON.stringify(that.parlist[i].Values)
                }
              
                let par = that.parlist[i];
                paredt(par).then(
                    res => {
                        let { code,msg,data} = res;
                        if(code == 200){
                            that.$message("参数"+par.Keys+"保存成功");
                        }else{
                            that.$message.error("参数"+par.Keys+"保存失败");
                        }
                    }
                ).catch(
                  (err) => {
                    that.$message.error("参数保存异常:\n"+err)
                }
                )
            }
            
            
        },
        editorRow(rows,index,row) {
            this.drawer = true;
            this.apiinfo = row;
            this.api_id = row.id;
            
            for (var i = this.HostList.length - 1; i >= 0; i--) {
              if (this.HostList[i].id == row.ApiHost.id){
                this.api_host = row.ApiHost.id
                this.api_server = this.HostList[i].service;
                break
              }
            }
            this.apiAll()
            this.GetPar()
            this.GetHead()
            // this.$router.push({ name: 'ApiInfo', params: { ApiId: row.id }});
        },
        GetSevice() {
            getserv().then(
                res => {
                var that = this;
                let { msg, code, data } = res;
                that.SerList = data.list;
            }).catch()
        },
        GetPtype(){
            getptype().then(
                res => {
                var that = this;
                let { msg, code, data } = res;
                that.Ptype = data.list;
            }).catch()
        },
        GetHost() {
            if (this.proid == undefined){
              this.proid = Number(sessionStorage.getItem("ProId"))
            }
            let par = {"proid":this.proid}

            hosts(par).then(
                res => {
                var that = this;
                let { msg, code, data } = res;
                that.HostList = data.list;
            }).catch()
        },
        GetApi (){
          var that = this;
            if (that.proid == undefined){
                that.proid = Number(sessionStorage.getItem("ProId"))
            }

            let params = {"proid":that.proid,"page":that.page,"pagesize":that.pagesize};
            getapiList(params).then( res => {
                
                let { msg, code, data } = res;
                that.apilist = data.list;
                // console.log("共"+that.apilist.length+"个接口数据");
                that.total = data.count;
            }).catch(
               function(error)  {
                    console.error(error);

                }
            )
        },
        handleSizeChange(val) {
            console.log(val);
            this.pagesize = val
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page = val;
            console.log(`当前页: ${val}`);
            if (this.apiname != ""){
              this.Search(this.page);
            }else{
              this.GetApi();
            }
            
        }
    }//methods
}
</script>

<style>
.tabdiv{
    text-align: center;
}
.item_name{
    padding: 0px;
    margin-left: 30px;
    /*background-color: #409EFF;*/
}

.item_name_input {
    width: 230px;
    height: 28px;
    padding: 0px;
    text-align: right;
    /*background-color: #F56C6C;*/
}
.par_new_input input{
    height: 28px;
    width: 180px;
    /*padding: 0px;*/
    /*white-space: nowrap;*/
    /*text-align: center;*/
    /*margin-left: 10px;*/
    /*background-color: #F56C6C;*/
}


.par_name_input {
    height: 28px;
    width: 78px;
    padding: 0px;
    white-space: nowrap;
    text-align: center;
    /*background-color: #F56C6C;*/
}
.formedit{
  background-color: rgba(244, 233, 228, 0.8);
  padding: 5px;
}
.formdiv{
    text-align: center;
    /*padding: 30px;*/
    height: 500px;
    padding-top: 10px;
    /*padding-left: 100px;*/
    /*margin-left: 100px;*/
    margin-top: 0px;
    overflow-y:auto;
    overflow: auto;
    background-color: rgba(204, 147, 221, 0.8);

}
.form{
    margin-left: 150px;
    margin-right: 30%;
}
.parname{
    margin-bottom: 10px;
    font-size: 20px;
}
.spandiv{
    margin-bottom: 10px;
    text-align: center;
    font-size: 20px;
}
.pardiv {
    min-height: 280px;
    width: auto;
    margin-left: 20%;
    margin-right: 20%;
    background-color: rgba(79, 100, 221, 0.8);
    border-radius:15px;
    margin-top: 20px;
    padding: 50px; 
    padding-left: 20px;
    /*text-align: center;*/
   /*margin-bottom: 10px;*/
   
}


.header{
  height: 500px;
  /*margin-left: 20%;
  margin-right: 20%;*/
  position: relative;
  overflow-y:auto;
  overflow: auto;
  background-color: rgba(214, 227, 196, 0.8);
}
.parbody{
    height: 500px;
    /*margin-left: 20%;
    margin-right: 20%;*/
    /*position: relative;*/
    overflow-y:auto;
    overflow: auto;
    background-color: rgba(238, 227, 227, 0.8);
}
.drawer{
    height: 600px;
}
.par_button{
    text-align: center;
}
.api_button{
    margin-top: 10px;
    text-align: center;
}
.proinfo{

}.btn-api{
    text-align: right;
}
.apiform{
    width: 500px;
    /*text-align: center;*/
    position: relative;
    /*overflow-y:auto;*/
    /*overflow: auto;*/
    background-color: ;
}
.res{
    /*width: 55%; */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    overflow-y:auto;
    overflow: auto;
    /*height: 300px;*/
    width: 100%;
    margin-top: 30px;
    padding: 20px;
    border-bottom-left-radius:5px;
    border-top-right-radius:5px;
    border-top-left-radius:5px;
    background-color: rgba(11, 47, 247, 0.07);
}
.line-limit-length {
/*overflow: hidden;*/
/*text-overflow: ellipsis;*/
/*white-space: nowrap; */
}
</style>
